<template>
    <div class="classCard">
        <p class="classCardP" v-if="showInvoiceInfo">发票信息已提交，请确认发票信息，如发票信息有误，请拨打客服{{api.config.telephone}}，发票开具时间为次月的1-5号，普票在报名信息里面查看下载，专票由协会统一邮寄，如发票已开出，将不能更改！</p>
        <div v-if="showInvoiceInfo" class="invoiceBxo">
            <el-form label-width="120px" style="width: 600px;margin: 0px auto;background: #f6f6f6;padding: 20px 50px;">
                <el-form-item label="发票类型：" class="text_left">
                    <p v-if="form.invoiceType==0">个人</p>
                    <p v-if="form.invoiceType==1">普票</p>
                    <p v-if="form.invoiceType==2">专票</p>
                </el-form-item>
                <el-form-item label="发票抬头：" class="text_left">
                    <p>{{form.invoiceTitle}}</p>
                </el-form-item>
				<el-form-item class="text_left" label="纳税人识别号：" v-if="form.taxRegistryNo != ''">
				    <p>{{form.taxRegistryNo}}</p>
				</el-form-item>
				<el-form-item class="text_left" label="开户行及账号：" v-if="form.accountInfo != ''">
				    <p>{{form.accountInfo}}</p>
				</el-form-item>
				<el-form-item class="text_left" label="地 址、电 话：" v-if="form.addressInfo != ''">
				    <p>{{form.addressInfo}}</p>
				</el-form-item>
            </el-form>
            <p style="margin-top: 20px;font-size: 15px;margin-bottom: 20px;color: #ff0000;">注：发票已开出不能修改发票信息。</p>
            <el-button type="primary" @click="reviseInfo()">修改发票信息</el-button>

            <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
        </div>
    </div>
</template>

<script>
    import ticketDialog from '@/components/invoice_lists.vue'
    export default {
        components: { ticketDialog },
        data() {
            return {
                showInvoiceInfo: true,
                form: {
                    invoiceTitle: "",
                    invoiceType: undefined,
                    taxRegistryNo: "",
                    account:"",
                    address:""
                },
                showInvoiceList: true
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getInvoiceInfo, {
                tradeNo: this.$route.params.tradeNo
            }, function(res) {
                if (!String.isEmptyOrNUll(res.resultMap.invoiceUrl)) {
                    window.location.href = res.resultMap.invoiceUrl;
                } else {
                    that.showInvoiceInfo = true;
                    that.form = res.resultMap;
                }
            });
        },
        methods: {
            reviseInfo: function() {
                this.$refs.invoiceChild.getInvoiceTemp();
            },
            invoiceBtn: function(data) {
                let invoiceId = data.id
                this.common.post(this.api.updateInvoiceInfo, {
                    tradeNo: this.$route.params.tradeNo,
                    dataInvoiceTempId: invoiceId
                }, res => {
                    this.$router.go(0);
                });
            }
        }
    }
</script>

<style>
    .classCard {
        text-align: center;
        padding-top: 100px;
    }

    .classCardP {
        font-size: 35px;
        color: #0b67d0;
        margin-bottom: 50px;
        line-height: 50px;
        width: 1000px;
        margin: 0 auto;
    }

    .invoiceBxo {
        margin-top: 50px;
    }

    .invoiceBtn {
        background: #0b67d0;
        color: #fff;
        border: none;
        outline: none;
        font-size: 16px;
        display: inline-block;
        padding: 0 10px;
        height: 38px;
        line-height: 38px;
        border-radius: 4px;
        margin: 30px 20px;
    }
    .reviseInfo{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(143, 143, 143, .5);
        padding: 10% 20%;
        box-sizing: border-box;
    }
</style>
